<template>
    <div>
        <audio id="audioTag" ref="music" autoplay loop :src="`https://music.163.com/song/media/outer/url?id=${this.$store.state.playList[this.$store.state.index].id}`"></audio>
        <div class="play">
            <div class="left" @click="isShow=!isShow">
                <img :src="this.$store.state.playList[this.$store.state.index].al.picUrl" alt="">
            </div>
            <div class="content">
                <div class="title">{{this.$store.state.playList[this.$store.state.index].name}}</div>
                <div class="tips">横滑可以切换上下首</div>
            </div>
            <div class="right">
                <svg class="icon" aria-hidden="true" @click="startMusic">
                    <use v-if="play" xlink:href="#icon-24gl-playCircle"></use>
                    <use v-else xlink:href="#icon-24gl-pauseCircle"></use>
                </svg>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liebiao"></use>
                </svg>
            </div>
        </div>
        <PlayMusic v-show="isShow" @closePlayMusic="statusPlayMusic" :state='play'></PlayMusic>
    </div>
</template>

<style lang="less" scoped>
    .play{
        width: 100%;
        height: 1.1rem;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-between;
    }
    .left{
        margin: auto .26rem;
        width: .8rem;
        img{
            border-radius: .1rem;
        }
    }
    .content{
        flex: 1;
        margin: .2rem 0;
        .title{
            line-height: .3rem;
            overflow: hidden; 
            text-overflow: ellipsis;
            display: -webkit-box; 
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }
        .tips{
            line-height: .5rem;
            font-size: .2rem;
            color: rgb(97, 97, 97);
        }
    }
    .right{
        width: 1.8rem;
        padding-right: .2rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .icon{
            font-size: .4rem;
        }
    }
</style>

<script>
import PlayMusic from './PlayMusic.vue'
export default {
    data () {
        return {
            play:true,
            isShow:false
        }
    },
    created() {
        console.log(123);
        console.log(this.playList);
    },
    methods:{
        startMusic(){
            let audio = this.$refs.music;
            if(audio.paused) {
                audio.play();
                this.play = false
            } else{
                audio.pause();
                this.play = true
            }
        },
        statusPlayMusic(){
            this.isShow=!this.isShow;
        }
    },
    components:{
        PlayMusic
    }
}
</script>